/**
 * 创建折线图
 * @param {DOM} elGrid 数据表格 Dom 元素（是 DIV，不是 TABLE），例如 document.querySelector('.table-main')
 * @param {String} name 图表名称
 * @param {Array} list 单列号码索引数据（一位数组）
 * @param {Object} option 选项
 * @param {String} option.lineColor 线条颜色，默认 'red'
 * @param {Number} option.lineWidth 线条宽度，默认 2
 * @param {Boolean} option.isSunburst 是否旭日图（旭日图：一个起点，多个终点；折线图：一个起点，一个终点）
 * @param {Number} lineWidth 线条宽度
 * @version 2.0.0
 * @example 折线图 document.querySelector('.line-canvas').appendChild(createLineCanvas(document.querySelector('.table-main'), 'line1', dltDs.getColumnData(0, true)));
 * @example 射线图 document.querySelector('.line-canvas').appendChild(createLineCanvas(document.querySelector('.table-main'), 'line2', [[1, 2], [6, 7], [6, 9]], { isSunburst: true }));
 */
export const createLineCanvas = (elGrid, name, list, option = { lineColor: 'red', lineWidth: 2, isSunburst: false, xstart: 0, ystart: 0, widthInc: 0, heightInc: 0 }) => {
    option = Object.assign({
        lineColor: 'red',
        lineWidth: 2,
        xstart: 0,
        ystart: 0,
        widthInc: 0,
        heightInc: 0,
        isSunburst: false
    }, option);

    let styleCell = {
        width: 0,
        height: 0,
        offset: {
            top: 0,
            left: 0
        },
        top: 0,
        left: 0,
    };
    let styleCvs = {
        top: 0,
        left: 0,
    };
    let styleCvsFirst = {
        top: 0,
        left: 0,
    };
    console.log('name', name, list)
    // 设置画布尺寸和线条的起始位置
    // https://www.runoob.com/tags/ref-canvas.html
    let cvs = document.createElement("canvas");
    cvs.className = "cvs-" + name;
    cvs.width = elGrid.scrollWidth + option.widthInc;
    cvs.height = elGrid.scrollHeight + option.heightInc;
    console.log('cvs画布尺寸:', cvs.width, cvs.height);
    cvs.style.top = 0;
    cvs.style.left = 0;
    cvs.style.position = "absolute";
    cvs.style.zIndex = 0;
    cvs.style.opacity = 0.4;
    cvs.style.pointerEvents = "none"; // 可点击dialog区域外的html元素
    let ctx = cvs.getContext("2d");
    ctx.save(); // 保存当前环境的状态。
    // ctx.fillStyle = "rgb(200,0,0,0.25)";
    // ctx.fillRect(0, styleCvs.top-40,cvs.width-60,cvs.height);
    ctx.strokeStyle = option.lineColor;
    ctx.lineWidth = option.lineWidth;
    ctx.lineJoin = "round";
    ctx.beginPath(); // 起始一条路径，或重置当前路径。
    // console.log('moveTo:', styleCvs.left, styleCvs.top,list[0])
    list.forEach((xy, i) => {
        let elCell = elGrid.children[xy[0] + option.ystart].children[xy[1] + option.xstart];
        console.log(xy, elCell)
        if (!elCell) {
            return;
        }
        styleCell.width = getOuterSize(elCell).width;
        styleCell.height = getOuterSize(elCell).height;
        styleCell.offset = getOffset(elCell);
        styleCell.top = styleCell.offset.top;
        styleCell.left = styleCell.offset.left;
        if (option.isSunburst) {
            styleCvs.left = styleCell.left + styleCell.width / 2;
            styleCvs.top = styleCell.top + styleCell.height / 2;
            if (i == 0) {
                styleCvsFirst.left = styleCvs.left;
                styleCvsFirst.top = styleCvs.top;
            }
            ctx.moveTo(styleCvsFirst.left, styleCvsFirst.top);
            if (i > 0) {
                ctx.lineTo(styleCvs.left, styleCvs.top); // 添加一个新点，然后在画布中创建从该点到最后指定点的线条。
            }
        } else {
            styleCvs.left = styleCell.left + styleCell.width / 2;
            styleCvs.top = styleCell.top + styleCell.height / 2;
            if (i == 0) {
                // 第一个号码的位置和尺寸
                ctx.moveTo(styleCvs.left, styleCvs.top);
            } else {
                ctx.lineTo(styleCvs.left, styleCvs.top); // 添加一个新点，然后在画布中创建从该点到最后指定点的线条。
            }
        }
        // console.log(i+'.lineTo:', styleCvs.left, styleCvs.top,list[i])
    })
    // ctx.closePath(); // 创建从当前点回到起始点的路径。
    ctx.stroke(); // 绘制已定义的路径。
    ctx.restore(); // 返回之前保存过的路径状态和属性。
    return cvs;
}

/**
 * 获取元素的偏移位置
 * @param {DOM} el 
 * @returns Object
 * @example getOffset(document.querySelector('.table-main'))
 * @link https://blog.csdn.net/weixin_41591151/article/details/81033106
 * @link https://gitee.com/sochishun/You-Dont-Need-jQuery
 */
const getOffset = (el) => {
    const box = el.getBoundingClientRect();
    return {
        top: box.top + window.pageYOffset - document.documentElement.clientTop,
        left: box.left + window.pageXOffset - document.documentElement.clientLeft
    }
}
const getOuterSize = (el, includeMargin) => {
    let size = {
        width: el.offsetWidth,
        height: el.offsetHeight
    }
    if (includeMargin) {
        var style = el.currentStyle || getComputedStyle(el);
        size.width += parseInt(style.marginLeft) + parseInt(style.marginRight);
        size.height += parseInt(style.marginTop) + parseInt(style.marginBottom);
    }
    return size;
}
